<!--
 * @Description: 路侧管理
 * @Author:       zhaixiangjun
 * @Date: 2021-11-02 14:00:49
 * @LastEditors:  zhaixiangjun
 * @LastEditTime: 2021-11-02 14:29:44
-->
<template>
  <BaseOperateTable
    ref="refPage"
    :show-selection="true"
    :header="columns"
    :query-url="queryUrl"
    :delete-url="deleteUrl"
    @operate="tableOperate"
    @query="query"
    @reset="resetCondition">
    <template v-slot:condition>
      <div>道路编号：
        <a-select
          v-model:value="condition.roadId"
          :options="roadIds"
          :allow-clear="true"
          placeholder="请选择道路编号"/>
      </div>
      <div>路侧类型：
        <a-select
          v-model:value="condition.roadSideType"
          :options="roadsideTypes"
          :allow-clear="true"
          placeholder="请选择路侧类型"/>
      </div>
      <div>位置类型：
        <a-select
          v-model:value="condition.locationType"
          :options="locationTypes"
          :allow-clear="true"
          placeholder="请选择位置类型"/>
      </div>
      <div>路侧名称：
        <a-input
          v-model:value="condition.roadSideName"
          :allow-clear="true"
          placeholder="请输入路侧名称"/>
      </div>
      <div>路侧编号：
        <a-input
          v-model:value="condition.roadSideId"
          :allow-clear="true"
          placeholder="请输入路侧编号"/>
      </div>
    </template>
    <template v-slot:operate>
      <a-button
        type="primary"
        @click="addData">添加数据</a-button>
      <a-button
        type="primary"
        @click="importData">导入数据</a-button>
      <a-button
        type="primary"
        danger
        @click="batchDelete">删除数据</a-button>
    </template>
  </BaseOperateTable>
  <BaseFormDialog
    ref="refAddDataDialog"
    :title="dialogTitle"
    :rules="addDataRules"
    :form="addDataForm">
    <template v-slot:coordinate="{state}">
      <a-input-group compact>
        <a-select
          v-model:value="state.coordinateType"
          style="width:130px"
          :options="COORDINATE"
          placeholder="请选择坐标系"
        />
        <a-input
          v-model:value="state.coordinate"
          style="width: 254px;marginLeft: 10px;"
          placeholder="请输入经纬度[120.0000, 30.0000]"/>
      </a-input-group>
    </template>
  </BaseFormDialog>
  <ImportDialog
    v-if="importDialogVisible"
    v-model:visible="importDialogVisible"
    :import-url="importUrl"
    @onSuccess="onImportFileSuccess"/>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { message } from 'ant-design-vue'
import { getRoadIds, getLocationTypes, getRoadSideTypes, addRoadSideInfo, editRoadSideInfo } from '@/api/roadside/roadside'
import { COORDINATE } from '@/config/roadsideCfg'
import { verifyCoordinate } from '@/utils/coordinate'
import BaseOperateTable from '@/components/BaseOperateTable.vue'
import BaseFormDialog from '@/components/BaseFormDialog.vue'
import ImportDialog from '@/components/roadside/ImportDialog.vue'
import { BasePath } from '@/api/request'

const refPage = ref(null)
const refAddDataDialog = ref(null)
const dialogTitle = ref('添加数据') // form表单弹窗标题
const importDialogVisible = ref(false) // 导入弹窗显隐

/** ========== 表格模块========== */

/** 表格标题栏配置 */
const queryUrl = ref(`${BasePath}/roadsideinfo/page`) // 分页查询接口URL
const deleteUrl = ref(`${BasePath}/roadsideinfo/`) // 批量删除接口URL
const importUrl = ref(`${BasePath}/roadsideinfo/upload`)
const columns = ref([
  {
    title: '道路编号',
    dataIndex: 'roadId',
    width: 200,
    ellipsis: true
  },
  {
    title: '路侧编号',
    dataIndex: 'roadSideId',
    width: 100,
    ellipsis: true
  },
  {
    title: '路侧名称',
    dataIndex: 'roadSideName',
    width: 160,
    ellipsis: true
  },
  {
    title: '坐标',
    dataIndex: 'coordinate',
    width: 200,
    ellipsis: true
  },
  {
    title: '位置类型',
    dataIndex: 'locationType',
    width: 100,
    ellipsis: true
  },
  {
    title: '路侧类型',
    dataIndex: 'roadSideType',
    width: 100,
    ellipsis: true
  },
  {
    title: '更新时间',
    dataIndex: 'updateTime',
    width: 200,
    ellipsis: true
  },
  {
    title: '操作人',
    dataIndex: 'remark',
    width: 100,
    ellipsis: true
  }
])

/** 表格操作列事件 */
const tableOperate = ({ eventType, data }) => {
  if (eventType === 'edit') {
    dialogTitle.value = '编辑数据'
    refAddDataDialog.value.setRequest(editRoadSideInfo, () => {
      refPage.value.query()
    })
    refAddDataDialog.value.setFormData(data)
    refAddDataDialog.value.show()
  }
}

/** ========== 查询条件模块========== */
// 查询条件
const condition = reactive({
  roadId: undefined,
  locationType: undefined,
  roadSideType: undefined,
  roadSideName: undefined,
  roadSideId: undefined
})
const roadIds = ref([]) // 道路编号列表
const locationTypes = ref([]) // 位置类型列表
const roadsideTypes = ref([]) // 路侧类型列表

/** 查询道路编号列表 */
const queryRoadIds = () => {
  getRoadIds().then(({ data, resCode, resMsg }) => {
    if (resCode === '00000') {
      roadIds.value = (data || []).map((value) => ({ value, label: value }))
    } else {
      message.error(resMsg)
    }
  })
}

/** 查询位置类型列表 */
const queryLocationTypes = () => {
  getLocationTypes().then(({ data, resCode, resMsg }) => {
    if (resCode === '00000') {
      locationTypes.value = (data || []).map((value) => ({ value, label: value }))
    } else {
      message.error(resMsg)
    }
  })
}

/** 查询路侧类型列表 */
const queryRoadsideTypes = () => {
  getRoadSideTypes().then(({ data, resCode, resMsg }) => {
    if (resCode === '00000') {
      roadsideTypes.value = (data || []).map((value) => ({ value, label: value }))
    } else {
      message.error(resMsg)
    }
  })
}

/** 重置条件 */
const resetCondition = () => {
  condition.roadId = undefined
  condition.locationType = undefined
  condition.roadSideType = undefined
  condition.roadSideName = undefined
  condition.roadSideId = undefined
}

/** 点击查询按钮后，执行表格查询 */
const query = () => {
  refPage.value.queryByCondition(condition, true)
}

queryRoadIds()
queryLocationTypes()
queryRoadsideTypes()

/** ========== 操作按钮模块========== */

/** 添加数据 */
const addData = () => {
  dialogTitle.value = '添加数据'
  let data = {}
  addDataForm.value.forEach(({ key, value }) => {
    data[key] = value
  })
  refAddDataDialog.value.setRequest(addRoadSideInfo, () => {
    resetCondition()
    refPage.value.resetQuery()
  })
  refAddDataDialog.value.setFormData(data)
  refAddDataDialog.value.show()
}

/** 导入数据 */
const importData = () => {
  importDialogVisible.value = true
}

/** 导入数据成功后 */
const onImportFileSuccess = () => {
  importDialogVisible.value = false
  resetCondition()
  refPage.value.resetQuery()
}

/** 批量删除 */
const batchDelete = () => {
  refPage.value.deleteSelectedRows()
}

/** ========== 表单模块========== */

// 添加数据表单的配置
const addDataForm = ref([
  { key: 'roadId', value: undefined, label: '道路编号' },
  { key: 'roadSideId', value: undefined, label: '路侧编号' },
  { key: 'roadSideName', value: undefined, label: '路侧名称' },
  { key: 'coordinate', value: undefined, label: '坐标', custom: true },
  { key: 'coordinateType', value: undefined, ignore: true },
  { key: 'locationType', value: undefined, label: '位置类型' },
  { key: 'roadSideType', value: undefined, label: '路侧类型' }
])

// 添加数据表单校验规则
const addDataRules = reactive({
  roadId: [
    { required: true, message: '请输入道路编号', trigger: 'blur' }
  ],
  roadSideId: [
    { required: true, message: '请输入路侧编号', trigger: 'blur' }
  ],
  roadSideName: [
    { required: true, message: '请输入路侧名称', trigger: 'blur' }
  ],
  coordinate: [
    { required: true, message: '请输入坐标' },
    { validator: coordinateRules }
  ],
  locationType: [
    { required: true, message: '请输入位置类型', trigger: 'blur' }
  ],
  roadSideType: [
    { required: true, message: '请输入路侧类型', trigger: 'blur' }
  ]
})

// 表单coordinate属性自定义校验规则
function coordinateRules (rule, value, callback) {
  if (!refAddDataDialog.value.getFormData().coordinateType) {
    callback(new Error('请选择坐标系类型'))
    return
  }
  if (!verifyCoordinate(value)) {
    callback(new Error('经纬度填写格式错误'))
    return
  }
  callback()
}
/**
 * 添加数据form表单数据提交
 */
const addFormConfirm = (info) => {
  if (dialogTitle.value === '添加数据') {
    // 添加数据
    addRoadSideInfo(info).then(({ resCode, resMsg }) => {
      if (resCode === '00000') {
        message.success('添加数据成功')
        resetCondition()
        refPage.value.resetQuery()
      } else {
        message.error(resMsg)
      }
    })
  } else {
    // 编辑数据
    editRoadSideInfo(info).then(({ resCode, resMsg }) => {
      if (resCode === '00000') {
        message.success('编辑数据成功')
        refPage.value.query()
      } else {
        message.error(resMsg)
      }
    })
  }
}
</script>
<script>
export default {
  name: 'roadside'
}
</script>
